<template>
  <div class="clients">
    <div style="display: flex; justify-content: space-between">
      <div style="display: flex">
        <el-button size="medium" type="primary" plain @click="add">
          新增
        </el-button>
        <el-button size="medium" type="primary" plain @click="getContactDays" v-if="root">
          联系天数
        </el-button>
        <el-button size="medium" type="primary" plain @click="charts()">
          排行榜
        </el-button>
      </div>

      <div style="display: flex">
        <!-- 条件查询 -->
        <el-input clearable @change="getClientsList" style="width: 240px;" v-model="name"
          placeholder="按姓名,手机号,公司,地址搜索"></el-input>
        <!-- 地区 -->
        <el-select v-model="provinceCode" filterable placeholder="省份" :loading="regionLoading" clearable
          style="width: 120px;" @focus="getCascadeList('province')" @change="selectProvince">
          <el-option v-for="item in provinceList" :key="item.value" :label="item.province" :value="item.provinceCode">
          </el-option>
        </el-select>
        <el-select v-model="cityCode" filterable placeholder="市" :loading="regionLoading" clearable
          style="width: 100px;" @focus="getCascadeList('city')" @change="selectCity">
          <el-option v-for="item in cityList" :key="item.value" :label="item.city" :value="item.cityCode">
          </el-option>
        </el-select>
        <el-select v-model="areaCode" filterable placeholder="区/县" :loading="regionLoading" clearable
          style="width: 100px;" @focus="getCascadeList('area')" @change="selectArea">
          <el-option v-for="item in areaList" :key="item.value" :label="item.area" :value="item.areaCode">
          </el-option>
        </el-select>
        <!-- 按业务员查询 -->
        <el-select v-model="salesmanId" filterable remote :loading="userLoading" placeholder="按业务员搜索" clearable
          :remote-method="getUserList" @change="getClientsList" @focus="getUserList('')" v-if="root"
          style="width: 135px;">
          <el-option v-for="item in userList" :key="item.id" :label="item.nickName" :value="item.id">
          </el-option>
        </el-select>
        <!-- 客户状态 -->
        <el-select style="width: 110px" v-model="value2" placeholder="客户状态" @change="selectType">
          <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2">
          </el-option>
        </el-select>
        <el-select style="margin-right: 10px; width: 150px" v-model="value3" placeholder="欠款排序" @change="selectType">
          <el-option label="欠款金额不排序" :value="0"></el-option>
          <el-option label="欠款金额按升序" :value="1"></el-option>
          <el-option label="欠款金额按降序" :value="-1"></el-option>
        </el-select>

        <el-button type="primary" @click="reset" v-debounce>重置</el-button>
        <el-button type="primary" @click="exportExcel" v-debounce>导出</el-button>
      </div>
    </div>

    <div class="goods-table">
      <el-table :data="tableData" v-loading="loading" border stripe style="width: 100%" height="100%">
        <el-table-column prop="i" label="序号" fixed="left" width="50">
        </el-table-column>
        <el-table-column prop="company" label="公司名称" fit width="180">
          <template slot-scope="scope">
            <div @click="Employeeupda(scope.row, 1)">
              {{ scope.row.company }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="客户姓名" fit width="80">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" fit width="115">
        </el-table-column>
        <el-table-column prop="addressShow" label="地址" fit width="200">
        </el-table-column>
        <el-table-column prop="times" label="交流次数" fit width="50">
        </el-table-column>
        <el-table-column prop="remindTime" label="下次约谈时间" fit width="105">
          <template slot-scope="scope">
            <div @click="remindTimeDialog(scope.row)">
              {{ formatDate(scope.row.remindTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="交流内容" fit width="180">
          <template slot-scope="scope">
            <!-- 如果内容长度大于30个字符，只显示前30个字符 -->
            {{
              removeHtmlTag(
                scope.row.content.length > 30
                  ? scope.row.content.substring(0, 30)
                  : scope.row.content
              )
            }}
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="业务员" width="80">
        </el-table-column>
        <el-table-column prop="debt" label="欠款金额" width="80">
          <template slot-scope="scope">
            {{ debtStatus(scope.row.debt) }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="150">
          <template slot-scope="scope">
            {{ scope.row.createTime.split("T")[0] }}
          </template>
        </el-table-column>
        <el-table-column prop="remarkContent" label="备注" width="150">
        </el-table-column>
        <!--  0成交客户，1意向客户，2潜在客户，3失信客户 -->
        <el-table-column prop="type" label="客户状态" width="90">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.type == 0" size="small">
              成交客户
            </el-tag>
            <el-tag type="warning" v-if="scope.row.type == 1" size="small">
              意向客户
            </el-tag>
            <el-tag type="info" v-if="scope.row.type == 2" size="small">
              纸箱厂客户
            </el-tag>
            <el-tag type="danger" v-if="scope.row.type == 3" size="small">
              失信客户
            </el-tag>
          </template>
        </el-table-column>
        <!--  0审核通过 1待审核 2审核失败 -->
        <el-table-column prop="status" label="审核状态" width="90">
          <template slot-scope="scope">
            <div v-if="scope.row.status !== null && scope.row.updateExamine === null">
              <el-tag type="success" v-if="scope.row.status == 0" size="small">
                {{ applyStatusInfo(scope.row.status) }}
              </el-tag>
              <el-tag type="warning" v-if="scope.row.status == 1" size="small">
                {{ applyStatusInfo(scope.row.status) }}
              </el-tag>
              <el-tag type="danger" v-if="scope.row.status == 2" size="small">
                {{ applyStatusInfo(scope.row.status) }}
              </el-tag>
            </div>
            <div v-if="scope.row.status === 0 && scope.row.updateExamine !== null">
              <el-tag type="success" v-if="scope.row.updateExamine == 0" size="small">
                {{ updateApplyInfo(scope.row.updateExamine) }}
              </el-tag>
              <el-tag type="warning" v-if="scope.row.updateExamine == 1" size="small">
                {{ updateApplyInfo(scope.row.updateExamine) }}
              </el-tag>
              <el-tag type="danger" v-if="scope.row.updateExamine == 2" size="small">
                {{ updateApplyInfo(scope.row.updateExamine) }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240" fixed="right">
          <template slot-scope="scope">
            <div style="display: flex">
              <el-button v-if="root" size="medium" type="text" @click="Employeeupda(scope.row, 2)"
                :disabled="applyDisabled(scope.row)">
                审核
              </el-button>
              <el-divider v-if="root" direction="vertical"></el-divider>
              <el-button size="medium" type="text" @click="applyUpdateEmployee(scope.row.id)">
                交流
              </el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button size="medium" type="text" @click="surrenderClients(scope.row.id)">
                放弃
              </el-button>
              <el-divider v-if="root" direction="vertical"></el-divider>
              <el-button v-if="root" size="medium" type="text" @click="distribution(scope.row.id)">
                分配
              </el-button>
              <el-divider v-if="root" direction="vertical"></el-divider>
              <el-button v-if="root" size="medium" type="text" @click="deleteGoods(scope.row)">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[20, 50, 100]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 联系天数弹窗 -->
    <el-dialog style="margin-top:0" :visible.sync="contactShow" width="30%" title="联系天数">
      <h4>设置联系天数期限，超过期限未联系，自动放弃客户到公海池</h4>
      <el-input v-model="contactDays" placeholder="联系天数" type="number" @input="inputCheck">
      </el-input>
      <div slot="footer">
        <el-button @click="contactShow = false">取消</el-button>
        <el-button type="primary" @click="updateContactDays" v-debounce>确定</el-button>
      </div>
    </el-dialog>

    <!-- 修改约谈时间弹窗 -->
    <el-dialog title="修改约谈时间" :visible.sync="remindTimeShow" width="30%" @close="resetData">
      <el-date-picker v-model="addEmployeeForm.remindTime" type="datetime" placeholder="下次约谈提醒时间"></el-date-picker>
      <span slot="footer" class="dialog-footer">
        <el-button @click="remindTimeShow = false">取 消</el-button>
        <el-button type="primary" @click="updateRemindTime()" v-debounce>确 定</el-button>
      </span>
    </el-dialog>

    <!-- 交流记录显示 -->
    <el-dialog style="margin-top: 0" :visible.sync="addFromDialog" width="60%" :show-close="false" :title="title">
      <div style="display: flex">
        <h3>历史交流记录</h3>
        <el-button type="success" style="height: 40px; margin-left: 30px; margin-top: 10px"
          @click="(addFromDialog4 = true), (content = '')">继续添加交流记录</el-button>
      </div>
      <div style="display: flex; flex-direction: column" v-for="(init, index) in chatList">
        <!-- <el-tag
          v-for="(init, index) in chatList"
          style="margin: 10px; width: 220px"
          v-bind:style="{ cursor: cursorStyle }"
          @click="SelectChat(index)"
          >交流时间：{{ formatDate(init.updateTime) }}</el-tag
        > -->

        <el-button type="primary" ref="myButton" style="margin: 10px; width: 240px" @click="SelectChat(index)"
          plain>交流时间：{{
            formatDate(init.updateTime) }}</el-button>
      </div>
      <el-form :model="addEmployeeForm" :inline="true" ref="addEmployeeForm" label-width="100px" class="demo-ruleForm">
        <div style="margin-top: 10px; height: 400px">
          <RichTextEditor style="height: 350px" @update-content="updateContent" :data="content" ref="RichTextEditor">
          </RichTextEditor>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addFromDialog = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 继续添加交流记录 -->
    <el-dialog style="margin-top: 0" :visible.sync="addFromDialog4" width="50%" :show-close="false" title="继续添加交流记录">
      <el-form :model="addEmployeeForm" :inline="true" ref="addEmployeeForm" label-width="100px" class="demo-ruleForm">
        <div style="margin-top: 10px; height: 400px">
          <RichTextEditor style="height: 350px" @update-content="updateContent" :data="content" ref="RichTextEditor">
          </RichTextEditor>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addrecordForm()" v-debounce>添加</el-button>
        <el-button @click="addFromDialog4 = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 新增客户信息显示 -->
    <el-dialog style="margin-top: 0" :visible.sync="addFromDialog2" width="75%" :show-close="false" :title="title"
      @close="closeDialog">
      <el-form :model="addEmployeeForm" :inline="true" ref="clientForm" :rules="clientRules" label-width="120px"
        class="demo-ruleForm">
        <el-form-item label="客户姓名" prop="name">
          <el-input type="text" v-model="addEmployeeForm.name" placeholder="客户姓名" :readonly="readonly">
          </el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <!-- <el-input type="text" v-model="addEmployeeForm.goodsName" placeholder="商品名称" ></el-input> -->
          <el-select v-model="addEmployeeForm.sex" placeholder="性别" :disabled="readonly">
            <el-option v-for="item in SexCategory" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input :readonly="readonly" type="text" v-model="addEmployeeForm.age" placeholder="年龄"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="mail">
          <el-input :readonly="readonly" type="text" v-model="addEmployeeForm.mail" placeholder="请填写邮箱地址"></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="phone">
          <el-input :readonly="readonly" type="text" v-model="addEmployeeForm.phone" placeholder="手机号"></el-input>
        </el-form-item>

        <el-form-item label="客户状态" prop="type">
          <el-select v-model="addEmployeeForm.type" placeholder="客户状态" :disabled="readonly">
            <el-option v-for="item in employeeStatusCategory" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="公司名称" prop="company">
          <el-input :readonly="readonly" type="text" v-model="addEmployeeForm.company" placeholder="公司名称"></el-input>
        </el-form-item>

        <el-form-item label="下次约谈时间" prop="remindTime">
          <el-date-picker :readonly="addEmployeeForm.id !== ''" v-model="addEmployeeForm.remindTime" type="datetime"
            placeholder="下次约谈提醒时间"></el-date-picker>
        </el-form-item>

        <!--        <el-form-item label="提醒原因" prop="reason">
          <el-input
            type="text"
            v-model="addEmployeeForm.reason"
            placeholder="提醒原因"
          ></el-input>
        </el-form-item> -->

        <el-form-item label="省市区" prop="district">
          <div id="app">
            <el-cascader :disabled="readonly" size="large" :options="pcaTextArr" v-model="selectedOptions">
            </el-cascader>
          </div>
        </el-form-item>

        <el-form-item label="详细地址" prop="dynamicTags">
          <el-tag :key="tag" v-for="tag in dynamicTags" style="margin-left: 10px" closable :disable-transitions="false"
            @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
            @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
          </el-input>
          <el-button style="margin-left: 10px" v-else class="button-new-tag" size="small" @click="showInput">+
            添加详细地址</el-button>
        </el-form-item>
        <el-form-item label="备注" prop="remarkContent">
          <el-input style="width: 550px;" :readonly="readonly" type="textarea" :autosize="{ minRows: 2 }"
            placeholder="请输入内容" v-model="addEmployeeForm.remarkContent">
          </el-input>
        </el-form-item>
        <br />
        <b> 交流内容 </b>
        <div style="margin-top: 10px; height: 450px">
          <RichTextEditor v-if="editorShow(addEmployeeForm.id)" style="height: 400px" @update-content="updateContent"
            :data="content" ref="RichTextEditor">
          </RichTextEditor>
          <div v-else v-html="content" style="border: 1px #000 solid;width: 100%;height: 400px;">
          </div>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button v-if="addEmployeeForm.id != '' && applyButton === 1" type="primary" @click="UpdateEmployee(1)"
          v-debounce>
          {{ buttonText() }}
        </el-button>
        <el-button type="primary" v-if="applyButton == 0" @click="UpdateEmployee(0)" v-debounce>
          新 增
        </el-button>
        <el-button type="primary" v-if="applyButton == 2" @click="auditClientsInfo(0)" v-debounce>
          通 过
        </el-button>
        <el-button type="danger" v-if="applyButton == 2" @click="auditClientsInfo(2)" v-debounce>
          驳 回
        </el-button>
        <el-button @click="addFromDialog2 = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 客户分配 -->
    <el-dialog style="margin-top: 0" :visible.sync="addFromDialog5" width="30%" :show-close="false" title="客户分配">
      <el-form :model="addEmployeeForm" :inline="true" ref="addEmployeeForm" label-width="100px"
        class="demo-ruleForm">请选择业务员：
        <el-select v-model="value" filterable placeholder="请选择">
          <el-option v-for="item in options" :key="item.id" :label="item.nickName" :value="item.id">
          </el-option>
        </el-select>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="CustomerAllocation()" v-debounce>分 配</el-button>
        <el-button @click="addFromDialog5 = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 业务员排行榜 -->
    <el-dialog style="margin-top: 0" width="50%" title="业务员排行榜" :visible.sync="addFromDialog6">
      <div style="display: flex;justify-content: right;margin-bottom: 10px;">
        <el-select v-model="type" placeholder="客户类型" @change="getRankingList" clearable
          style="margin-left: 10px;width: 180px;">
          <el-option label="意向客户" :value="1"></el-option>
          <el-option label="成交客户" :value="0"></el-option>
        </el-select>
        <el-select v-model="status" placeholder="全部" @change="getRankingList" clearable
          style="margin-left: 10px;width: 180px;">
          <el-option label="当日数量" :value="0"></el-option>
          <el-option label="当月数量" :value="1"></el-option>
        </el-select>
      </div>
      <div class="order-table">
        <el-table :data="rankingList" v-loading="rankingLoading" border style="width: 100%;" max-height="350">
          <el-table-column prop="i" label="排名" fit></el-table-column>
          <el-table-column prop="userName" label="业务员" fit></el-table-column>
          <el-table-column prop="total" label="客户数量" fit></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import clientsApi from "../../api/clients.js";
import regionApi from "../../api/region.js";
import userApi from "../../api/user.js";
import {
  // getGoodsCategory,
  addEmployeeProfile,
  deleteEmployeeProfileById,
  selectEmployeeProfileById,
  UploadFile,
  updateEmployeeProfile,
  updateEmployeeUpdateStatus,
  selectEmployeeProfileByName,
  selectAllClients, //查询所有客户信息
  insertClients, //新增客户信息
  selectClientsById, //根据id查询客户信息
  updateClients, //修改客户信息
  selectChatByClientId, //根据客户id查询交流记录
  deleteClientsById, //删除客户信息
  insertChat, //新增交流记录
  auditClients, //审核客户信息
  selectClientsBySearch, //模糊查询客户信息
  adminGetSalesman, //查询所有业务员
  dispatchClients, //分配客户
  selectClientsCountByType, //根据客户类型查询客户数量
} from "../../api/all";

import { pcaTextArr } from "element-china-area-data";

// import { selectAllClients, selectChatByClientId } from "../../api/clients";
import RichTextEditor from "../../components/RichTextEditor.vue";
import region from "../../api/region.js";
export default {
  components: {
    RichTextEditor,
  },
  data() {
    return {
      contactShow: false,
      contactDays: null,
      type: null,
      status: null,
      rankingList: [],
      rankingLoading: false,
      readonly: false,
      provinceCode: null,
      provinceList: [],
      regionLoading: false,
      cityCode: null,
      cityList: [],
      areaCode: null,
      areaList: [],
      salesmanId: null,
      userLoading: false,
      userList: [],
      name: null,
      remindTimeShow: false,
      userInfo: {},
      root: false,
      //排行榜数据
      chartsTwoVo: "",
      //日期选项卡
      radioOne: "0",
      radioTwe: "2",
      // 业务员选择器
      options: [],
      options2: [
        { value2: "4", label2: "全部" },
        { value2: "0", label2: "成交客户" },
        { value2: "1", label2: "意向客户" },
        { value2: "2", label2: "纸箱厂客户" },
        { value2: "3", label2: "失信客户" },
      ],

      //客户id
      CustomerId: "",
      value: "",
      value2: "4",
      value3: 0,
      content: "",
      //交流记录id
      recordid: "",
      //鼠标样式
      cursorStyle: "default",
      //用户历史交流记录
      chatList: [],
      //用户地址标签
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      //省市区
      pcaTextArr,
      selectedOptions: [],
      //搜索客户地址
      selectedOptions2: [],

      //搜索框的值
      input: "",
      //富文本编辑器
      materialForm: {
        title: "", //标题
        type: 0, //类型
        content: "", // 内容
        imageUrl: "", // 图片地址
        videoUrl: "", // 视频地址
      },
      // 图片预览
      srcList: [],
      srcList2: [],
      //修改按钮状态
      applyButton: 0, //0新增，1修改，2审核
      // 上传图片文件
      selectedFile: null,
      //判断用户点击的是合同还是保密协议
      htdz: "",
      // 合同地址
      imageUrl: "",
      // 保密协议地址
      imageUrl2: "",
      //新增标题
      title: "交流记录",
      roleType: false,
      cover: "cover",
      // 显示表单
      addFromDialog: false,
      addFromDialog2: false,
      addFromDialog3: false,
      addFromDialog4: false,
      addFromDialog5: false,
      addFromDialog6: false,

      // 表格加载
      loading: false,
      //合同到期提醒
      dialogImageUrl: "",
      dialogVisible: false,
      //表格数据
      tableData: [],
      // 新增客户档案记录
      addEmployeeForm: {
        id: "",
        userId: "",
        name: "",
        sex: "",
        age: "",
        mail: "",
        phone: "",
        type: "",
        company: "",
        province: "", // 省
        city: "", // 市
        district: "", // 区/县
        address: "",
        content: "",
        interviewType: 1, //提醒类型 1:联系客户 2:合同到期 3:分期付款提醒
        reason: "", //提醒原因
        remindTime: "",
        createTime: "",
        updateTime: "",
        isFirst: 0,
        status: 0, //0审核通过，1审核中，2审核失败
        remarkContent: ""
      },
      //新增客户交谈记录
      recordForm: {
        clientsId: "",
        content: "",
        contentHtml: "",
      },
      //总数页
      total: 1,
      // 分页大小
      pageSize: 50,
      //记录当前页数
      currentPage: 1,
      //审核通过状态
      applyStatus: false,
      // 商品分类
      SexCategory: [
        { label: "男", value: 0 },
        { label: "女", value: 1 },
      ],
      //在职信息
      employeeStatusCategory: [
        { label: "成交客户", value: 0 },
        { label: "意向客户", value: 1 },
        { label: "纸箱厂客户", value: 2 },
        { label: "失信客户", value: 3 },
      ],
      clientRules: {
        name: [{
          required: true,
          message: '请输入客户姓名',
          trigger: 'blur',
        }],
        phone: [{
          required: true,
          message: '请输入客户联系电话',
          trigger: 'blur',
        }, {
          pattern: /^[1][3-9][0-9]{9}$/,
          message: '请输入正确的手机号码',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请选择客户状态',
          trigger: 'blur',
        }],
        company: [{
          required: true,
          message: '请输入客户公司名称',
          trigger: 'blur',
        }],
        remindTime: [{
          required: true,
          message: '请选择下次约谈时间',
          trigger: 'blur',
        }],
        district: [{
          required: true,
          message: '请选择省市区',
          trigger: 'blur',
        }],
        dynamicTags: [{
          validator: this.checkDynamicTags,
          trigger: 'blur'
        }]
      }
    };
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));;
    if (this.userInfo.roleId === "1") {
      this.root = true;
    }
    console.log("userInfo===>", this.userInfo);
    this.getClientsList();
  },
  //超级管理员显示功能
  methods: {
    checkDynamicTags(rule, value, callback) {
      if (this.dynamicTags.length < 1) {
        return callback(new Error('地址不能为空'));
      } else {
        callback();
      }
    },
    //导出Excel
    exportExcel() {
      const data = this.formatData(this.tableData); // 将数据格式化为xlsx可以识别的格式
      const wb = this.$XLSX.utils.book_new();
      const ws = this.$XLSX.utils.json_to_sheet(data);
      // 设置列宽
      const columnWidths = [
        { wch: 5 }, // 序号
        { wch: 10 }, // 客户姓名
        { wch: 5 }, // 性别
        { wch: 5 }, // 年龄
        { wch: 15 }, // 邮箱
        { wch: 15 }, // 手机号
        { wch: 20 }, // 公司名称
        { wch: 50 }, // 地址
        { wch: 8 }, // 交流次数
        { wch: 10 }, // 客户状态
        { wch: 15 } // 备注
      ];
      ws['!cols'] = columnWidths;
      this.$XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      this.$XLSX.writeFile(wb, "客户信息.xlsx");
    },
    formatData(data) {
      // 格式化表格数据，将对象数组转换为数组对象
      return data.map((item) => {
        // 0成交客户，1意向客户，2潜在客户，3失信客户
        let msg = "";
        if (item.type === 0) {
          msg = "成交客户"
        } else if (item.type === 1) {
          msg = "意向客户"
        } else if (item.type === 2) {
          msg = "纸箱厂客户"
        } else if (item.type === 3) {
          msg = "失信客户"
        }
        item.typeMsg = msg
        const {
          i,
          name,
          sex,
          age,
          mail,
          phone,
          company,
          addressShow,
          times,
          typeMsg,
          remark
        } = item;
        return {
          序号: i,
          客户姓名: name,
          性别: sex,
          年龄: age,
          邮箱: mail,
          手机号: phone,
          公司名称: company,
          地址: addressShow,
          交流次数: times,
          客户状态: typeMsg,
          备注: remark
        };
      });
    },
    //去除html代码标签
    removeHtmlTag(str) {
      return str.replace(/<[^>]+>/g, "");
    },
    //欠款状态
    debtStatus(kt) {
      if (kt == null || kt == 0) {
        return "暂无欠款";
      } else {
        return kt;
      }
    },
    //标签
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    //排行榜客户类型筛选条件
    handleRadioChange() {
      selectClientsCountByType(this.radioTwe, this.radioOne).then((data) => {
        if (data.code) {
          this.chartsTwoVo = data.data;
        } else {
          this.$message({
            type: "error",
            message: data.message,
          });
        }
      });
    },
    //审核客户信息
    auditClientsInfo(status) {
      if (this.addEmployeeForm.status !== 0) {
        auditClients(this.addEmployeeForm.id, status).then((data) => {
          if (data.code) {
            this.$message({
              type: "success",
              message: "操作成功",
            });
            //关闭弹窗
            this.getClientsList();
            this.addFromDialog2 = false;
          } else {
            this.$message({
              type: "error",
              message: data.message,
            });
          }
          this.getClientsList();
        });
      } else {
        const data = {
          id: this.addEmployeeForm.id,
          updateExamine: status
        }
        clientsApi.updateClientsApply(data).then(res => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "操作成功",
            });
            this.addFromDialog2 = false;
            this.getClientsList();
          }
        })
      }
    },
    // 富文本传值
    updateContent(data) {
      this.materialForm.content = data.content;
      // this.materialForm.imageUrl = data.imageList;
      //console.log("data===>", this.materialForm.content);
    },
    // 是否显示富文本编辑器
    editorShow(id) {
      if (this.root) {
        return true;
      } else {
        if (id === '') {
          return true;
        }
      }
      return false;
    },
    //用户状态显示转换   0成交客户，1意向客户，2潜在客户，3失信客户
    typeInfo(data) {
      let typeVal = "";
      if (data == 0) {
        typeVal = "成交客户";
      } else if (data == 1) {
        typeVal = "意向客户";
      } else if (data == 2) {
        typeVal = "纸箱厂客户";
      } else if (data == 3) {
        typeVal = "失信客户";
      }
      return typeVal;
    },
    //审核状态显示
    applyStatusInfo(data) {
      let typeVal = "";
      if (data == 0) {
        typeVal = "审核通过";
      } else if (data == 1) {
        typeVal = "新增审核";
      } else if (data == 2) {
        typeVal = "审核失败";
      }
      return typeVal;
    },
    // 修改审核
    updateApplyInfo(data) {
      if (data === 0) {
        return "修改通过"
      } else if (data === 1) {
        return "修改待审"
      }
      return "修改驳回"
    },
    //鼠标样式
    changeCursor(style) {
      this.cursorStyle = style;
    },
    // 格式化时间
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, "0");
      const day = d.getDate().toString().padStart(2, "0");
      const hours = d.getHours().toString().padStart(2, "0");
      const minutes = d.getMinutes().toString().padStart(2, "0");
      const seconds = d.getSeconds().toString().padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    startTimeChange(value) {
      this.addEmployeeForm.startTime = dayjs(value).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      console.log("上架时间", dayjs(value).format("YYYY-MM-DD HH:mm:ss"));
    },
    endTimeChange(value) {
      this.addEmployeeForm.endTime = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
      console.log("上架时间", dayjs(value).format("YYYY-MM-DD HH:mm:ss"));
    },
    //用户分配
    distribution(id) {
      this.CustomerId = id;
      //查询所有业务员
      const data = {
        roleId: 3
      }
      userApi.fuzzyQuery(data).then(res => {
        if (res.code == 200) {
          this.options = res.data.userVoList;
        }
      }).finally(() => {
        this.addFromDialog5 = true;
      })
    },
    //继续添加交流记录
    addrecordForm() {
      this.recordForm.content = this.materialForm.content;
      this.recordForm.contentHtml = this.materialForm.content;
      insertChat(this.recordForm).then((data) => {
        if (data.code) {
          this.$message({
            type: "success",
            message: data.message,
          });
          this.addFromDialog4 = false
          this.getClientsList();
        } else {
          this.$message({
            type: "error",
            message: data.message,
          });
        }
      });
    },
    //SelectChat 选择交流记录
    SelectChat(index) {
      this.content = this.chatList[index].content;
      // this.$refs.myButton.click();
    },
    //新增员工档案信息
    UpdateEmployee(i) {
      this.addEmployeeForm.province = this.selectedOptions[0];
      this.addEmployeeForm.city = this.selectedOptions[1];
      this.addEmployeeForm.district = this.selectedOptions[2];
      //富文本赋值
      this.addEmployeeForm.content = this.materialForm.content;
      this.addEmployeeForm.isSalesman = 0; //设置为客户列表添加
      //把数组拆分，拼接成12312321,21313,123123带,号这样拼接
      this.addEmployeeForm.address = this.dynamicTags.join(",");
      //this.infoPet();
      this.$refs.clientForm.validate((valid) => {
        if (valid) {
          if (i == 0) {
            // 添加
            this.addEmployeeForm.status = 0;
            insertClients(this.addEmployeeForm).then((data) => {
              if (data.message != "201" && data.code) {
                this.$message({
                  type: "success",
                  message: data.message,
                });
                this.getClientsList();
                this.addFromDialog2 = false;
              } else if (data.message == "201") {
                //如果是201则是存在，弹出提示用户是否继续添加？点击是则继续添加，点击否则返回
                this.$confirm("该客户已存在，是否继续添加?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then(() => {
                    this.addEmployeeForm.isFirst = 1;
                    insertClients(this.addEmployeeForm).then((data) => {
                      if (data.code) {
                        this.$message({
                          type: "success",
                          message: "操作成功",
                        });
                        this.getClientsList();
                        this.addFromDialog2 = false;
                      } else {
                        this.$message({
                          type: "error",
                          message: data.message,
                        });
                      }
                    });
                  })
                  .catch(() => {
                    this.$message({
                      type: "info",
                      message: "已取消添加",
                    });
                  });
              } else {
                this.$message({
                  type: "error",
                  message: data.message,
                });
              }
            });
            return;
          } else {
            // 修改
            // //管理员直接修改
            // if (i == 1) {
            //   this.addEmployeeForm.status = 0;
            // }
            // //员工申请修改
            // if (i == 2) {
            //   this.addEmployeeForm.status = 1;
            // }
            updateClients(this.addEmployeeForm).then((data) => {
              if (data.code) {
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
                this.getClientsList();
                this.addFromDialog2 = false;
              } else {
                this.$message({
                  type: "error",
                  message: data.message,
                });
              }
            });
          }
        } else {
          console.log("验证失败")
        }
      })
    },
    // 按钮文字
    buttonText() {
      if (this.root || this.addEmployeeForm.status !== 0) {
        return '修 改'
      }
      return '申请修改'
    },
    //业务员排行榜  typeOne: 0:成交客户 1：意向客户 2全部 typeTwo：0日，1月
    charts() {
      // selectClientsCountByType(2, 0).then((data) => {
      //   console.log(data);
      //   if (data.code) {
      //     this.chartsTwoVo = data.data;
      //   } else {
      //     this.$message({
      //       type: "error",
      //       message: data.message,
      //     });
      //   }
      // });
      this.getRankingList();
      this.addFromDialog6 = true;
    },
    //模糊查询信息
    likeEmployee() {
      selectClientsBySearch(this.input).then((data) => {
        if (data.code) {
          this.tableData = data.data.clientsVoList.map((item, index) => {
            item.i = index + 1;
            return item;
          });
        } else {
          this.$message({
            type: "error",
            message: data.message,
          });
        }
      });
    },
    //客户分配给业务员
    CustomerAllocation() {
      dispatchClients(this.CustomerId, this.value).then((data) => {
        if (data.code) {
          this.$message({
            type: "success",
            message: data.message,
          });
          this.getClientsList();
          this.addFromDialog5 = false;
        } else {
          this.$message({
            type: "error",
            message: data.message,
          });
        }
      });
    },
    //在职状态显示
    employeeStatuse(i) {
      let val = "";
      if (i == 0) {
        val = "在职";
      }
      if (i == 1) {
        val = "离职";
      }
      return val;
    },
    //性别显示
    employeeSex(i) {
      let val = "";
      if (i == 0) {
        val = "男";
      }
      if (i == 1) {
        val = "女";
      }
      return val;
    },
    //cx  根据筛选条件查询
    cx() {
      //数组拼接成字符串,使用,号拼接
      let address = this.selectedOptions2.join(",");
      this.getAllGoods2(address, this.value2);
    },
    //交谈记录
    applyUpdateEmployee(id) {
      this.content = "";
      this.chatList = [];
      this.recordForm.clientsId = id;
      this.title = "交流记录";
      this.imgstatus();
      //延迟2000毫秒执行
      setTimeout(() => {
        this.addFromDialog = true;
      }, 400);
      //判断是否为超级管理  0是新增 1是修改，2是申请修改
      if (this.root) {
        this.applyButton = 3;
      } else {
        this.applyButton = 2;
      }
      selectChatByClientId(id).then((data) => {
        this.chatList = data.data;
        this.content = data.data[0].content;
      });
      // selectChatByClientId(id).then((data) => {
      //   console.log(data);
      //   this.addFromDialog = true;
      // });

      // updateEmployeeProfileByAdmin(id,this.applyStatus).then((data) => {
      //   if (data.code) {
      //     this.$message({
      //       type: "success",
      //       message: "操作成功",
      //     });
      //     this.getAllGoods();
      //   } else {
      //     this.$message({
      //       type: "error",
      //       message: data.message,
      //     });
      //   }
      // });
    },

    //编辑客户信息
    Employeeupda(item, index) {
      this.title = "编辑客户信息";
      this.content = "";
      this.imgstatus();
      if (index === 1) {
        // 1修改
        this.applyButton = 1;
      } else if (index === 2) {
        // 2审核
        this.applyButton = 2;
        this.readonly = true;
      }
      if (item.updateExamine !== 1 ||
        (this.root && index === 1)) {
        selectClientsById(item.id).then((data) => {
          this.content = data.data.content;
          //把地址拆分成数组
          this.dynamicTags = data.data.address.split(",");
          if (data.data.province === '天津' || data.data.province === '北京') {
            data.data.province = data.data.province + '市'
          }
          //把用户省市区
          this.selectedOptions = [
            data.data.province,
            data.data.city,
            data.data.district,
          ];
          this.updateContent(data.data.content);
          this.addEmployeeForm = data.data;
          this.addFromDialog2 = true;
        });
      } else {
        const data = {
          id: item.id
        }
        clientsApi.getClientsCache(data).then(res => {
          if (res.code === 200) {
            this.content = res.data.content;
            //把地址拆分成数组
            this.dynamicTags = res.data.address.split(",");
            if (res.data.province === '天津' || res.data.province === '北京') {
              res.data.province = res.data.province + '市'
            }
            //把用户省市区
            this.selectedOptions = [
              res.data.province,
              res.data.city,
              res.data.district,
            ];
            this.updateContent(res.data.content);
            this.addEmployeeForm = res.data;
            this.addFromDialog2 = true;
          }
        })
      }
    },
    //上传图片
    selectFile(i) {
      this.htdz = i;
      this.$refs.fileInput.click();
    },
    //上传oss
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
      if (this.htdz == 1) {
        this.imageUrl = URL.createObjectURL(this.selectedFile);
      }
      if (this.htdz == 2) {
        this.imageUrl2 = URL.createObjectURL(this.selectedFile);
      }
      this.uploadImage();
    },
    //初始化图片
    imgstatus() {
      let url =
        "https://kris-k.oss-cn-hangzhou.aliyuncs.com/kris/c179093a-41b0-4c70-bc1f-6e5973f35c98-jia.png";
      this.imageUrl = url;
      this.imageUrl2 = url;
    },
    //发送上传文件api
    uploadImage() {
      let formData = new FormData();
      formData.append("file", this.selectedFile);
      UploadFile(formData).then((data) => {
        let url = data.data;
        if (this.htdz == 1) {
          this.addEmployeeForm.employeeContractFile = url;
        }
        if (this.htdz == 2) {
          this.addEmployeeForm.employeeSecrecyFile = url;
        }
      });
    },
    //ReviewArchives 审核档案信息
    ReviewArchives(status) {
      updateEmployeeUpdateStatus(this.addEmployeeForm.id, status).then(
        (data) => {
          if (data.code) {
            this.$message({
              type: "success",
              message: "操作成功",
            });
            this.addFromDialog = false;
            this.getClientsList();
          } else {
            this.$message({
              type: "error",
              message: data.message,
            });
          }
        }
      );
    },
    // 重置数据
    resetData() {
      this.addEmployeeForm = {
        id: "",
        userId: "",
        name: "",
        sex: "",
        age: "",
        mail: "",
        phone: "",
        type: "",
        company: "",
        province: "",
        city: "",
        district: "",
        address: "",
        content: "",
        remindTime: "",
        createTime: "",
        updateTime: "",
        isFirst: 0,
      }
    },
    // 新增客户档案记录
    add() {
      this.content = "";
      this.imgstatus();
      this.resetData();
      this.title = "新增客户信息";
      // this.addFromDialog = true;
      this.addFromDialog2 = true;

      this.applyButton = 0; //0新增 1修改，2审核
      // 获取商品类别
      // this.getGoodsCategory();
    },
    // 关闭新增弹窗
    closeDialog() {
      this.$refs.clientForm.resetFields();
      this.dynamicTags = []
      this.selectedOptions = []
      this.readonly = false;
    },
    // 查询列表
    getAllGoods() {
      this.loading = true;
      selectAllClients(this.currentPage, this.pageSize, "", "").then((res) => {
        if (res.code) {
          this.total = res.data.total;
          this.tableData = res.data.clientsVoList.map((item, index) => {
            item.i = (this.currentPage - 1) * this.pageSize + index + 1;
            if (item.content === null) {
              item.content = ''
            }
            return item;
          });
        } else {
          this.$message("列表加载错误");
        }
      });
      this.loading = false;
    },
    //通过地区和类型查询
    getAllGoods2(address, type) {
      this.loading = true;
      selectAllClients(this.currentPage, this.pageSize, address, type).then(
        (res) => {
          if (res.code) {
            this.total = res.data.total;
            this.tableData = res.data.clientsVoList.map((item, index) => {
              item.i = (this.currentPage - 1) * this.pageSize + index + 1;
              if (item.content === null) {
                item.content = ''
              }
              return item;
            });
          } else {
            this.$message("列表加载错误");
          }
        }
      );
      this.loading = false;
    },
    // pageSize变化
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getClientsList();
    },
    // 页码变化
    handleCurrentChange(curPage) {
      this.currentPage = curPage;
      this.getClientsList();
    },
    //在职状态
    employeeStatuse(i) {
      let val = "";
      if (i == 0) {
        val = "在职";
      }
      if (i == 1) {
        val = "离职";
      }
      return val;
    },

    //职工修改状态 0:已修改(第一次提交) 1:待审核 2:审核通过 3:审核失败
    employeeUpdateStatuse(i) {
      let val = "";
      if (i == 0) {
        val = "已修改";
      } else if (i == 1) {
        val = "待审核";
      } else if (i == 2) {
        val = "审核通过";
      } else if (i == 3) {
        val = "审核失败";
      }
      return val;
    },
    // getGoodsCategory() {
    //   getGoodsCategory().then((res) => {
    //     this.gooodsCategory = res.data.map((item) => ({
    //       label: item.name,
    //       value: item.id,
    //     }));
    //     console.log("获取商品类别", res);
    //   });
    // },
    // 删除商品
    deleteGoods(empl) {
      this.$confirm(`确定继续删除名为《${empl.name}》的用户吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteClientsById(empl.id).then((res) => {
            if (res.code) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getClientsList();
            } else {
              this.$message({
                type: "error",
                message: "删除失败!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 打开修改约谈时间弹窗
    remindTimeDialog(item) {
      this.addEmployeeForm = item;
      this.remindTimeShow = true;
    },
    // 修改约谈时间
    updateRemindTime() {
      const data = {
        id: this.addEmployeeForm.id,
        remindTime: this.addEmployeeForm.remindTime
      }
      console.log("addEmployeeForm：", this.addEmployeeForm)
      console.log("提交的数据：", data)
      clientsApi.updateRemindTime(data).then(res => {
        if (res.code === 200) {
          this.$message.success("修改成功");
          this.remindTimeShow = false;
          this.resetData();
          this.getClientsList();
        }
      })
    },
    getClientsList() {
      this.loading = true;
      let province = null;
      let city = null;
      let area = null;
      if (this.provinceCode !== null && this.provinceCode !== '') {
        const region = this.provinceList.filter(item => item.provinceCode === this.provinceCode)
        province = region[0].province
      }
      if (this.cityCode !== null && this.cityCode !== '') {
        const region = this.cityList.filter(item => item.cityCode === this.cityCode)
        city = region[0].city
      }
      if (this.areaCode !== null && this.areaCode !== '') {
        const region = this.areaList.filter(item => item.areaCode === this.areaCode)
        area = region[0].area
      }
      const data = {
        name: this.name,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        salesmanId: this.salesmanId,
        type: this.value2,
        province: province,
        city: city,
        district: area,
        isSalesman: 0, // 客户列表
        sortedType: this.value3
      }
      clientsApi.getClientsList(data).then(res => {
        if (res.code === 200) {
          this.loading = false
          this.tableData = res.data.clientsVoList.map((item, index) => {
            item.i = (this.currentPage - 1) * this.pageSize + index + 1;

            item.addressShow = item.province + item.city + item.district + item.address
            if (item.content === null) {
              item.content = ''
            }
            return item;
          })

          this.total = res.data.total
          //console.log("获取的数据==>",res.data)
        }
      })
    },
    // 获取地区
    getCascadeList(value) {
      //console.log('value==>',value)

      let data = {};
      if (value === 'city') {
        this.cityList = []
        if (this.provinceCode === null || this.provinceCode === '') {
          return;
        }
        data = {
          provinceCode: this.provinceCode
        }
      } else if (value === 'area') {
        this.areaList = []
        if (this.cityCode === null || this.cityCode === '') {
          return;
        }
        data = {
          cityCode: this.cityCode
        }
      }
      this.regionLoading = true;
      regionApi.getCascadeList(data).then(res => {
        if (res.code === 200) {
          if (value === 'province') {
            this.provinceList = res.data
          } else if (value === 'city') {
            this.cityList = res.data
          } else if (value === 'area') {
            this.areaList = res.data
          }
        }
      }).finally(() => {
        this.regionLoading = false;
      })
    },
    // 选择省
    selectProvince(value) {
      // 重置市代码
      this.cityCode = null
      // 清空市列表
      this.cityList = []
      // 重置区/县代码
      this.areaCode = null
      // 清空区/县列表
      this.areaList = []
      // 查询客户列表
      this.getClientsList();
    },
    // 选择市
    selectCity(value) {
      // 重置区/县代码
      this.areaCode = null
      // 清空区/县列表
      this.areaList = []
      // 查询客户列表
      this.getClientsList();
    },
    // 选择区/县
    selectArea(value) {
      this.getClientsList();
    },
    // 选择类型
    selectType(e) {
      this.currentPage = 1;
      this.getClientsList();
    },
    // 重置
    reset() {
      this.salesmanId = null;
      this.name = null;
      this.provinceCode = null;
      this.cityCode = null;
      this.areaCode = null;
      this.value2 = '4';
      this.getClientsList();
    },
    // 放弃客户
    surrenderClients(id) {
      this.$confirm('此操作会将客户移入公海池，是否要放弃客户？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          id: id
        }
        clientsApi.surrenderClients(data).then(res => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.getClientsList();
          }
        })
      })
    },
    applyDisabled(item) {
      if (item.updateExamine === null) {
        if (item.status === 1) {
          return false;
        }
        return true;
      } else {
        if (item.updateExamine === 1) {
          return false;
        }
        return true;
      }
    },
    // 获取排行列表
    getRankingList() {
      this.rankingLoading = true
      const data = {
        type: this.type,
        monthOrDay: this.status
      }
      clientsApi.rankingList(data).then(res => {
        if (res.code === 200) {
          this.rankingList = res.data.map((item, index) => {
            item.i = index + 1;
            return item;
          })
        }
      }).finally(() => {
        this.rankingLoading = false
      })
    },
    // 远程搜索业务员
    async getUserList(query) {
      this.userLoading = true;
      let data = {
        nickName: query,
        roleId: 3,
      }
      let roleId3 = await userApi.fuzzyQuery(data)
      data.roleId = 1
      let roleId1 = await userApi.fuzzyQuery(data)
      data.roleId = 7
      let roleId7 = await userApi.fuzzyQuery(data)
      this.userList = [...roleId1.data.userVoList, ...roleId3.data.userVoList, ...roleId7.data.userVoList]
      this.userLoading = false;
    },
    // 获取联系天数
    getContactDays() {
      clientsApi.getContactDays().then(res => {
        if (res.code === 200) {
          this.contactDays = res.data.court;
          this.contactShow = true;
        }
      })
    },
    // 输入检查
    inputCheck(e) {
      let inputNumber = this.contactDays
      if (inputNumber <= 0) {
        inputNumber = 1
      }
      // 只能输入整数
      let regex = /\./;
      if (regex.test(inputNumber)) {
        // 带小数设置为1
        inputNumber = 1
      }
      let value = parseInt(inputNumber)
      if (isNaN(value)) {
        value = 1;
      }
      this.contactDays = value
    },
    // 修改联系天数
    updateContactDays() {
      const data = {
        court: this.contactDays
      }
      clientsApi.updateContactDays(data).then(res => {
        if (res.code === 200) {
          this.$message.success("修改成功");
          this.contactShow = false;
        }
      })
    }
  },
};
</script>

<style scoped>
.page {
  text-align: center;
}

.clients {
  height: 100%;
}

.goods-table {
  height: 94%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  margin-top: 10px;
}

.imgUrl {
  width: 100px;
  height: 100px;
  object-fit: cover;
  /* 保持原始宽高比，填充容器 */
}

.htimg {
  width: 150px;
  height: 150px;
  object-fit: cover;
  /* 保持原始宽高比，填充容器 */
}
</style>
